<template>
  <el-row :gutter="20" class="section row-summary">
    <el-col :xs="12" :sm="12" :md="6" :lg="6">
      <div class="card-panel panel-users" @click="handleClickCardItem('users')">
        <div class="card-icon card-icon-users">
          <iconfont icon="users"/>
        </div>
        <div class="card-info">
          <div class="title">新用户</div>
          <div class="num">{{thousandSplit(100000.1533)}}</div>
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :md="6" :lg="6">
      <div class="card-panel panel-message" @click="handleClickCardItem('message')">
        <div class="card-icon card-icon-message">
          <iconfont icon="message"/>
        </div>
        <div class="card-info">
          <div class="title">留言评论</div>
          <div class="num">{{thousandSplit(100000)}}</div>
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :md="6" :lg="6">
      <div class="card-panel panel-sales" @click="handleClickCardItem('sales')">
        <div class="card-icon card-icon-sales">
          <iconfont icon="sales"/>
        </div>
        <div class="card-info">
          <div class="title">销售额</div>
          <div class="num">{{thousandSplit(100000)}}</div>
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :md="6" :lg="6">
      <div class="card-panel panel-cart" @click="handleClickCardItem('cart')">
        <div class="card-icon card-icon-cart">
          <iconfont icon="cart"/>
        </div>
        <div class="card-info">
          <div class="title">销售量</div>
          <div class="num">{{thousandSplit(100000)}}</div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import { thousandSplit } from '@/utils'
export default {
  methods: {
    thousandSplit,
    handleClickCardItem(type) {
      this.$emit('changeChartType', type)
    }
  }
}
</script>

<style lang="stylus" scoped>
.card-panel
  display flex
  padding 15px
  margin-bottom 20px
  align-items center
  background-color #f5f5f5
  cursor pointer
  &:hover
    .svg-icon
      color #fff
    .card-icon-users
      background-color #40c9c6
    .card-icon-message
      background-color #36a3f7
    .card-icon-sales
      background-color #f4516c
    .card-icon-cart
      background-color #FFB980
  .card-icon
    width 60px
    height 60px
    text-align center
    line-height 60px
    font-size 45px
    border-radius 10px
  .icon-users
    color #40c9c6
  .icon-message
    color #36a3f7
  .icon-sales
    color #f4516c
  .icon-cart
    color #FFB980
  .card-info
    flex 1
    font-size 18px
    text-align right
    line-height 1.5
    .title
      color #666
    .num
      color #777
      font-family Helvetica
      font-weight 700
</style>
